<template>
  <y-dialog @open="open" @close="emit('close')" width="1000px" append-to-body>
    <el-form
      ref="auRef"
      :model="form"
      :rules="rules"
      size="default"
      label-width="120px"
    >
      <el-row>
        <el-col>
          <el-form-item label="用例名称" prop="name">
            <el-input
              v-model="form.name"
              placeholder="请输入用例名称"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="所属产品" prop="product">
            <y-select
              v-model="form.product"
              placeholder="请选择所属产品"
              :optionsFunc="listProduct"
              @change="changeProductOptions"
              :disabled="props.operate === 'update'"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属模块" prop="module">
            <y-tree-select
              v-model="form.module"
              :optionsFunc="selectModule"
              :optionsParams="queryParams"
              @change="changeModuleOptions"
              placeholder="请选择所属模块"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="用例编号" prop="number">
            <el-input
              v-model="form.number"
              placeholder="请输入用例编号"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用例类型" prop="type">
            <y-select
              v-model="form.type"
              placeholder="请选择用例类型"
              :options="tms_tc_type"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="level">
            <template #label>
              <span>
                <el-tooltip placement="top">
                  <template #content>
                    <div>
                      L1：最基础的功能验证，占比5%；
                      <br />L2：基本功能验证，占比20%；
                      <br />L3：重要特性验证，占比60%；
                      <br />L4：一般功能/非重要功能验证，包括对基本/重要功能的异常验证，占比10%~20%；
                      <br />L5：非常特殊的输入、场景、阈值条件验证，占比0%~5%。
                    </div>
                  </template>
                  <el-icon>
                    <question-filled />
                  </el-icon>
                </el-tooltip>
                用例级别
              </span>
            </template>
            <y-select
              v-model="form.level"
              placeholder="请选择用例级别"
              :options="tms_tc_level"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="适用阶段" prop="stage">
            <y-select
              v-model="form.stage"
              placeholder="请选择适用阶段"
              :options="tms_tc_stage"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="状态" prop="status">
            <y-radio v-model="form.status" :options="sys_enable_disable" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否可自动化" prop="isauto">
            <y-radio v-model="form.isauto" :options="sys_yes_no" />
          </el-form-item>
        </el-col>
      </el-row>
      <div>
        <el-row>
          <el-col>
            <el-form-item label="预置条件" prop="precondition">
              <el-input
                v-model="form.precondition"
                placeholder="请输入预置条件"
                type="textarea"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item
              label="操作步骤"
              prop="steps"
              style="font-weight: bold"
            >
              <steps
                :loading="loading"
                :type="form.type"
                :module="form.module"
                :steps="form.steps"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="自动化参数" prop="params">
              <el-input
                v-model="form.params"
                placeholder="请输入自动化参数"
                type="textarea"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="关联需求" prop="reqs">
              <y-tree-select
                v-model="form.reqs"
                :optionsFunc="selectRequirement"
                :optionsParams="queryParams"
                placeholder="请选择关联需求"
                multiple
              />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <el-row>
        <el-col>
          <el-form-item prop="description">
            <template #label>
              <span>
                <el-tooltip placement="top">
                  <template #content>
                    <div>测试说明用于对用例验证过程和目的进行简单说明。</div>
                  </template>
                  <el-icon>
                    <question-filled />
                  </el-icon>
                </el-tooltip>
                测试说明
              </span>
            </template>
            <el-input
              v-model="form.description"
              placeholder="请输入测试说明"
              type="textarea"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="备注" prop="remark">
            <y-editor
              editorId="editorCaseRemark"
              v-model="form.remark"
              placeholder="请输入备注信息"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="标签" prop="tags">
            <y-tag v-model="form.tags" :closable="true" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submit">确定</el-button>
        <el-button type="warning" @click="reset">重置</el-button>
        <el-button @click="emit('close')">取消</el-button>
      </div>
    </template>
  </y-dialog>
</template>

<script setup name="AuCase">
import { isEmpty } from "@/utils/validate";
import { listProduct } from "@/api/pms/product";
import { prefix, treeselect as selectModule } from "@/api/pms/module";
import {
  listRequirement,
  treeselect as selectRequirement,
} from "@/api/pms/requirement";
import Steps from "./Steps";

const { proxy } = getCurrentInstance();
const {
  sys_yes_no,
  tms_tc_level,
  sys_enable_disable,
  tms_tc_type,
  tms_tc_stage,
} = proxy.useDict(
  "sys_yes_no",
  "tms_tc_level",
  "sys_enable_disable",
  "tms_tc_type",
  "tms_tc_stage"
);

const emit = defineEmits(["submited", "close"]);

const loading = ref(false);

const data = reactive({
  form: {},
  queryParams: {
    product: undefined,
    protocol: undefined,
    packet: undefined,
    nopaginate: true,
  },
  rules: {
    number: [{ required: true, message: "用例编号不能为空", trigger: "blur" }],
    name: [{ required: true, message: "用例名称不能为空", trigger: "blur" }],
    product: [{ required: true, message: "所属产品不能为空", trigger: "blur" }],
    module: [{ required: true, message: "所属模块不能为空", trigger: "blur" }],
    type: [{ required: true, message: "用例类型不能为空", trigger: "blur" }],
    level: [{ required: true, message: "用例级别不能为空", trigger: "blur" }],
    stage: [{ required: true, message: "适用阶段不能为空", trigger: "blur" }],
    isauto: [
      { required: true, message: "是否可自动化不能为空", trigger: "blur" },
    ],
    status: [{ required: true, message: "需求状态不能为空", trigger: "blur" }],
    steps: [{ required: true, message: "用例描述不能为空", trigger: "blur" }],
    reqs: [{ required: true, message: "关联需求不能为空", trigger: "blur" }],
  },
});

const { queryParams, form, rules } = toRefs(data);

const props = defineProps({
  id: { type: String, default: "" },
  operate: { type: String, default: "add" },
  getMethod: { type: Function, default: undefined },
  addMethod: { type: Function, default: undefined },
  updateMethod: { type: Function, default: undefined },
});

/** 切换产品对象事件 */
function changeProductOptions(val) {
  queryParams.value.product = val;
  form.value.module = undefined;
  form.value.reqs = undefined;
}

/** 切换模块对象事件 */
function changeModuleOptions(val) {
  if (!isEmpty(val)) {
    prefix({ id: val }).then((res) => {
      form.value.number = res.data;
    });
  }
}

/** 更新标签方法 */
function handleTagsUpdate(data) {
  form.value.tags = data;
}

/** 打开对话框事件 */
function open() {
  switch (props.operate) {
    case "copy":
    case "update":
      loading.value = true;
      props.getMethod(props.id).then((res) => {
        form.value = res.data;
        form.value.params =
          JSON.stringify(form.value.params) == "{}"
            ? undefined
            : form.value.params;
        queryParams.value.product = form.value.product.value;
        queryParams.value.protocol = form.value.protocol;
        queryParams.value.packet = form.value.packet;
        loading.value = false;
      });
      break;
    default:
      reset();
      break;
  }
}

/** 重置Form方法 */
function reset() {
  form.value = {
    type: "0",
    level: "0",
    stage: "2",
    isauto: "Y",
    status: "0",
    params: "{}",
    steps: [
      {
        id: 1,
        step: "",
        exp: "",
      },
    ],
  };
  proxy.resetForm("auRef");
}

/** 提交按钮事件 */
function submit() {
  if (props.operate === "copy") {
    form.value.id = undefined;
  }
  proxy.$refs["auRef"].validate((valid) => {
    if (valid) {
      if (form.value.id != undefined) {
        props.updateMethod(form.value).then((res) => {
          proxy.$modal.msgSuccess("修改成功");
          submited();
        });
      } else {
        props.addMethod(form.value).then((res) => {
          proxy.$modal.msgSuccess("新增成功");
          submited();
        });
      }
    }
  });
}

/** submited事件 */
function submited() {
  emit("submited");
  emit("close");
}
</script>
